<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=no">
	<meta name="format-detection" content="telphone=no, email=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>环保数据管家</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link rel="stylesheet" type="text/css" href="assets/css/iconfont/iconfont.css">
	<link rel="stylesheet" type="text/css" href="assets/css/app.css">
	<link rel="stylesheet" type="text/css" href="assets/css/air.css">
	<script type="text/javascript">
		/**
   * 对Date的扩展，将 Date 转化为指定格式的String
   * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
   * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
   * eg:
   * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
   * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
   * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
   * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
   * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
   */
  Date.prototype.pattern = function(fmt) {
    var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
      "H+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    var week = {
      "0": "\u65e5",
      "1": "\u4e00",
      "2": "\u4e8c",
      "3": "\u4e09",
      "4": "\u56db",
      "5": "\u4e94",
      "6": "\u516d"
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    if (/(E+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "星期" : "") : "") + week[this.getDay() + ""]);
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  }
  
	</script>
</head>
<body>
	<div class="pf-content wuranwu-wrap">
		
		<!--空气质量天数比例-->
		<h1 class="h_tit">空气质量天数比例</h1>
		<div class="wr-chart-item" id="wrchat-airquality"></div>
		<!--污染物浓度比例饼图-->
		<div class="title_box">
	    	<h1 class="h_tit">年度首要污染物分析</h1>
			<div class="order-hd-select">
				<select class="month-select" id="everyyear-select"></select>
			</div>
        </div>
        <div class="wr-chat">
        	<div class="wr-chat-item u-bd-bt" id="wrchat-eveyearbili"></div>
        </div>
        <div class="title_box">
	    	<h1 class="h_tit">月度首要污染物分析</h1>
			<div class="order-hd-select">
				<select class="month-select everymonth-select" id="everymonth-select-1"></select>
			</div>
        </div>
        <div class="wr-chat">
			<div class="wr-chat-item u-bd-bt" id="wrchat-evemonbili"></div>
		</div>
		<div class="title_box">
	    	<h1 class="h_tit">每月空气质量及污染物浓度比例</h1>
			<div class="order-hd-select">
				<select class="month-select everymonth-select" id="everymonth-select-2"></select>
			</div>
        </div>
        <div class="wr-chat">
        	<div class="air-pie">
        		<div class="wr-zhibiao-control flex-row bing">
					<span class="flex-row-item zhibiao-item color-aqi active" dn='aqi'>AQI</span>
					<span class="flex-row-item zhibiao-item color-pm25" dn='pm25'>PM<sub>2.5</sub></span>
					<span class="flex-row-item zhibiao-item color-pm10" dn='pm10'>PM<sub>10</sub></span>
					<span class="flex-row-item zhibiao-item color-so2" dn='so2'>SO<sub>2</sub></span>
					<span class="flex-row-item zhibiao-item color-no2" dn='no2'>NO<sub>2</sub></span>
					<span class="flex-row-item zhibiao-item color-co" dn='co'>CO</span>
					<span class="flex-row-item zhibiao-item color-o3" dn='o3'>O<sub>3</sub></span>
				</div>
				<div class="wr-chat-item" id="wrchat-zhibiao"></div>
        	</div>
        </div>
        <div class="title_box">
	    	<h1 class="h_tit">时间段空气质量分析</h1>
			<div class="order-hd-select">
				<select class="month-select everymonth-select" id="onetime-select"></select>
			</div>
        </div>
        <div class="wr-chat">
        	<div class="air-pie">
        		<div class="wr-zhibiao-control flex-row zhe">
					<span class="flex-row-item zhibiao-item color-aqi" dn='aqi' ix='0'>AQI</span>
					<span class="flex-row-item zhibiao-item color-pm25" dn='pm25' ix='1'>PM<sub>2.5</sub></span>
					<span class="flex-row-item zhibiao-item color-pm10" dn='pm10' ix='2'>PM<sub>10</sub></span>
					<span class="flex-row-item zhibiao-item color-so2" dn='so2' ix='3'>SO<sub>2</sub></span>
					<span class="flex-row-item zhibiao-item color-no2" dn='no2' ix='4'>NO<sub>2</sub></span>
					<span class="flex-row-item zhibiao-item color-co" dn='co' ix='5'>CO</span>
					<span class="flex-row-item zhibiao-item color-o3" dn='o3' ix='6'>O<sub>3</sub></span>
				</div>
        	</div>
        	<div class="wr-chart-item" id="wrchat-onetimeair"></div>
        </div>
        <h1 class="h_tit">工业排放量及AQI（月度日均值）</h1>
        <div class="wr-chat">
        	<div class="wr-chart-item" id="wrchat-factoryout"></div>
        </div>
</body>

<script src="assets/js/jquery.js"></script>
<script src="assets/js/touch.min.js"></script>
<script src="assets/js/highcharts.js"></script>
<script src="assets/echart/echarts.pie.min.js"></script>
<!--<script src="assets/echart/echarts.min.js"></script>-->
<script src="assets/js/function.js"></script>

<script>
/*----------------空气质量分析页面的单独js代码部分start------------------*/
/*请求地址全局变量*/
// var RequestUrl = '.';
var RequestUrl = 'http://58.213.141.220:8989/njhbindex';
//var RequestUrl = 'http://127.0.01:8020/njhb_new';

/*建立缓存*/
var DataCachesEnable = true;//缓存总开关
var DataCacheValidity = 1000*1800;//30分钟有效期
var DataCaches=[];
//缓存重置
function cacheReset(){
	DataCaches['aqiitemsyear']=[];//每月污染物浓度比例图一
	DataCaches['aqiitemsyear']['year']=[];
	DataCaches['aqiitemsyear']['data']=[];
	
	DataCaches['aqiitemsday']=[];//每月污染物浓度比例图一
	DataCaches['aqiitemsday']['month']=[];
	DataCaches['aqiitemsday']['data']=[];
	
	DataCaches['aqiitems']=[];//每月污染物浓度比例图一指标切换
	DataCaches['aqiitems']['month']=[];
	DataCaches['aqiitems']['data']=[];
	
	DataCaches['aqidays']=[];//空气质量天数比例
	
	DataCaches['aqihours']=[];//同一时间段空气质量
	DataCaches['aqihours']['month']=[];
	DataCaches['aqihours']['data']=[];
	
	DataCaches['gypf']=[];//工业排放量
	DataCaches['aqims']=[];//工业排放aqi指标
}
cacheReset();
//缓存到期更新
setInterval(function(){
	if(DataCachesEnable){
		cacheReset();
	}
}, DataCacheValidity);

//同一时间段chart
var tysjd_chart;
//均线颜色
var avgColor = {aqi:'#01b3d9',pm25:'#e16f6e',pm10:'#688ff4',so2:'#23ae39',no2:'#e4b503',co:'#00E3D8',o3:'#FE9A01'};
var wr_month_html, thisMonth = (new Date()).pattern("M")-1, thisYear = (new Date()).pattern("yyyy");
var today_num = (new Date()).pattern("d");
// if(thisMonth==2){
// 	if(today_num>=14){
// 		thisMonth++
// 	}
// }else{
// 	if(today_num>=15){
// 		thisMonth++
// 	}
// }
if(thisMonth==0){
	thisYear-=1;
	thisMonth=12;
}
//每月污染物浓度比例-生成下拉菜单
var tmphl='',h2015='';
for(var i=1;i<=12;i++){
  	h2015+='<option value="'+(thisYear-1)+'-'+appendZeroleft(i)+'">'+(thisYear-1)+'年'+i+'月</option>';
}
for(var i=1;i<=thisMonth;i++){
	var selected = '';
	if(i==thisMonth){
		selected = 'selected';
	}
  	tmphl+='<option value="'+thisYear+'-'+appendZeroleft(i)+'" '+selected+'>'+thisYear+'年'+i+'月</option>';
}
$('.everymonth-select').html(h2015+tmphl);
tmphl='';
for(var i=2014;i<=thisYear;i++){
	var selected = '';
	if(i==thisYear){
		selected = 'selected';
	}
  	tmphl+='<option value="'+i+'" '+selected+'>'+i+'年</option>';
}
$('#everyyear-select').html(tmphl);

//初始化饼图一默认当月
set_wrchat_data_byyear(RequestUrl,thisYear);
set_wrchat_data_bymonth(RequestUrl,thisYear+'-'+appendZeroleft(thisMonth));
//初始化饼图二默认pm2.5//=>aqi
refreshChrat(RequestUrl,'wrchat-zhibiao',thisYear+'-'+appendZeroleft(thisMonth),'aqi');
//月份切换
$('#everyyear-select').change(function(){
	var v = $(this).val();
	if(thisYear!=v){
		thisYear=v;
		set_wrchat_data_byyear(RequestUrl,thisYear);
	}
})
$('#everymonth-select-1').change(function(){
	var v = $(this).val();
	set_wrchat_data_bymonth(RequestUrl,v);//每月污染物浓度比例图一
	// var zb = $('.zhibiao-item.active').attr('dn');
	// refreshChrat(RequestUrl,'wrchat-zhibiao',v,zb);//每月污染物浓度比例图二
	$('#everymonth-select-1').val(v);
})
$('#everymonth-select-2').change(function(){
	var v = $(this).val();
	// set_wrchat_data_bymonth(RequestUrl,v);//每月污染物浓度比例图一
	var zb = $('.zhibiao-item.active').attr('dn');
	refreshChrat(RequestUrl,'wrchat-zhibiao',v,zb);//每月污染物浓度比例图二
	$('#everymonth-select-2').val(v);
})
//指标切换
$('.bing .zhibiao-item').on('click',function(){
	$(this).addClass('active').siblings('.zhibiao-item').removeClass('active');
	//月份
	var m = $('.everymonth-select').val();
	//指标
	var zb = $(this).attr('dn');
	//刷新图表
	refreshChrat(RequestUrl,'wrchat-zhibiao',m,zb);
})

//堆叠柱状图
make_wrchat_column(RequestUrl,'wrchat-airquality');//空气质量天数比例

/*生成下拉菜单*/
tmphl='';
for(var i=1;i<=thisMonth;i++){
	var selected = '';
	if(i==thisMonth){
		selected = 'selected';
	}
  	tmphl+='<option value="'+i+'" '+selected+'>'+thisYear+'年'+i+'月</option>';
}
$('#onetime-select').html(tmphl);

//同一时间段空气质量/折线图
make_wrchat_line(RequestUrl,'wrchat-onetimeair',thisYear+'-'+appendZeroleft(thisMonth));
$('#onetime-select').val(thisMonth);
//折线图月份切换
$('#onetime-select').change(function(){
	var zb = $('.zhe .zhibiao-item.active').attr('dn');
	var min = $('.zhe .zhibiao-item.active').attr('min');
	make_wrchat_line(RequestUrl,'wrchat-onetimeair',thisYear+'-'+ appendZeroleft($(this).val()),zb,min);
})
//折线图指标切换
$('.zhe .zhibiao-item').on('click',function(){
	if($(this).hasClass('active')){
		return false;
	}
	var p = $(this).siblings('.active');
	var pi = p.attr('ix');
	var pavgid = p.attr('dn');
	tysjd_chart.series[pi].hide();
	
	$(this).addClass('active').siblings().removeClass('active');
	//月份
	var m = $('#onetime-select').val();
	//指标
	var zb = $(this).attr('dn');
	//index
	var ix = $(this).attr('ix');
	//avg
	var avg = $(this).attr('avg');
	//min
	var minz = $(this).attr('min');
	//刷新图表
	if($(this).hasClass('active')){
		make_wrchat_line(RequestUrl,'wrchat-onetimeair',thisYear+'-'+ appendZeroleft(m),zb,minz);
//		tysjd_chart.series[ix].show();
//		tysjd_chart.yAxis[0].removePlotLine('PlotLine-'+pavgid);
//		tysjd_chart.yAxis[0].addPlotLine({
//			color: avgColor[zb],
//      	dashStyle:'ShortDash',
//      	width: 1,
//      	value: avg,
//      	id:'PlotLine-'+zb
//		})
//		tysjd_chart.yAxis[0].update({min:minz});
	}
})

//工业排放量/条形图
make_wrchat_columngroup(RequestUrl,'wrchat-factoryout');

/*----------------空气质量分析页面的单独js代码部分end------------------*/
</script>

<script>
	touch.on('#app-back', 'tap', function(ev){
	  //exit app
	});
	touch.on('#app-main-link', 'tap', function(ev){
	  location.href='index.html';
	});
	touch.on('#app-middle-link', 'tap', function(ev){
	  location.href='air-quality.html';
	});
	touch.on('#app-map-link', 'tap', function(ev){
	  location.href='map.html';
	});
	touch.on('#app-order-link-js', 'tap', function(ev){
	  location.href='order.html#js';
	});
	touch.on('#app-order-link-csj', 'tap', function(ev){
	  location.href='order.html#csj';
	});
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1259663969'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1259663969' type='text/javascript'%3E%3C/script%3E"));</script>
</html>
